<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="format-detection" content="telephone=no">
	<title>single</title>
	<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
</head>

<body>
<div id="section_container">
	<section data-role="section" id="page_single_0" class="active">
		<header>
		  <div class="titlebar">
		    <a data-toggle="back" href="#">
	            <i class="icon icon-arrowleft"></i>
	        </a>
		    <h1>单页模式</h1>
		  </div>
		</header>
		<article id="main_article" data-role="article" class="active">
			<a class="button block margin8 bg-1" href="#page_single_1" data-target="section">slideleft</a>
		    <a class="button block margin8 bg-2" href="#page_single_2" data-target="section">slideright</a>
		    <a class="button block margin8 bg-3" href="#page_single_3" data-target="section">slideup</a>
		    <a class="button block margin8 bg-4" href="#page_single_4" data-target="section">slidedown</a>
		    <a class="button block margin8 bg-5" href="#page_single_5" data-target="section">fade</a>
		    <a class="button block margin8 bg-6" href="#page_single_6" data-target="section">none</a>
		    <div class="card padding8">
		    	因为用到了popstate，涉及到跨域的问题，所以此页面需要在服务器上运行
		    </div>
		</article>
	</section>
</div>
<!--- third -->
	<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
	<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
	<!---  agile -->
	<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
	<!-- app -->
	<script type="text/javascript" src="../assets/app/js/app.seedsui.js"></script>
	<section data-role="section" id="page_single_1" data-sectionanimation="slideleft" class="bg-1">
		slideleft
	</section>
</div>
<!--- third -->
	<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
	<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
	<!---  agile -->
	<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
	<!-- app -->
	<script type="text/javascript" src="../assets/app/js/app.seedsui.js"></script>
	<section data-role="section" id="page_single_2" data-sectionanimation="slideright" class="bg-2">
		slideright
	</section>
</div>
<!--- third -->
	<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
	<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
	<!---  agile -->
	<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
	<!-- app -->
	<script type="text/javascript" src="../assets/app/js/app.seedsui.js"></script>
	<section data-role="section" id="page_single_3" data-sectionanimation="slideup" class="bg-3">
		slideup
	</section>
</div>
<!--- third -->
	<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
	<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
	<!---  agile -->
	<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
	<!-- app -->
	<script type="text/javascript" src="../assets/app/js/app.seedsui.js"></script>
	<section data-role="section" id="page_single_4" data-sectionanimation="slidedown" class="bg-4">
		slidedown
	</section>
</div>
<!--- third -->
	<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
	<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
	<!---  agile -->
	<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
	<!-- app -->
	<script type="text/javascript" src="../assets/app/js/app.seedsui.js"></script>
	<section data-role="section" id="page_single_5" data-sectionanimation="fade" class="bg-5">
		fade
	</section>
</div>
<!--- third -->
	<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
	<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
	<!---  agile -->
	<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
	<!-- app -->
	<script type="text/javascript" src="../assets/app/js/app.seedsui.js"></script>
	<section data-role="section" id="page_single_6" data-sectionanimation="none" class="bg-6">
		none
	</section>
</div>
<!--- third -->
	<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
	<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
	<!---  agile -->
	<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
	<!-- app -->
	<script type="text/javascript" src="../assets/app/js/app.seedsui.js"></script>
	
    
    
    
    
    
	<script>
		var sec=new Section({
			"onSectionOpenStart":function(e){
				console.log("您点击了：");
				console.log(e.target);
				console.log("页面加载前"+e.sectionId);
			},
			"onSectionOpenEnd":function(e){
				console.log("您点击了：");
				console.log(e.target);
				console.log("页面加载完成"+e.sectionId);
				console.log(e.history);
			},
			"onSectionCloseStart":function(e){
				console.log("您点击了：");
				console.log(e.target);
				console.log("页面关闭前"+e.sectionId);
			},
			"onSectionCloseEnd":function(e){
				console.log("您点击了：");
				console.log(e.target);
				console.log("页面关闭完成"+e.sectionId);
			}
		});
		
	</script>
</body>
</html>
